<template>

  <!--  轮播图  -->
  <van-swipe :autoplay="3000" lazy-render loop style="width: 100%;height: 200px" touchable>
    <van-swipe-item v-for="image in images" :key="image" style="width: 50%;height: auto;display: flex;justify-content: center;align-items: center;">
      <img alt="轮播图" :src="image" style="width: 70%;height: auto"/>
    </van-swipe-item>
  </van-swipe>


  <!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
  <van-notice-bar
      scrollable
      left-icon="volume-o"
      text="交友协作平台:This⭐️提供爱好匹配，找到志同道合的小伙伴⭐️提供自定义标签，增加匹配度哦⭐️提供房间组队，来组队开房间一起共同完成项目吧"
  />


  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatch">
        <template #node>
          <div class="icon-wrapper">
            <van-icon :name="isMatch ? 'fire' : ''" size="25px" color="red"/>
          </div>
        </template>
      </van-switch>
    </template>
  </van-cell>

  <UserRecommendCard :user-list="userListRecommend" v-if="!isMatch"></UserRecommendCard>
  <UserMatchCard :user-list="userListMatch" v-if="isMatch"></UserMatchCard>

  <van-empty image="search" description="暂无用户" v-if="!isMatch && (userListRecommend.length < 1 || !userListRecommend)" />
  <van-loading  vertical v-if="!isMatch && (userListRecommend.length < 1 || !userListRecommend)">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>


  <van-empty image="search" description="暂无用户" v-if="isMatch && (userListMatch.length < 1 || !userListMatch)" />
  <van-loading  vertical v-if="isMatch && (userListMatch.length < 1 || !userListMatch)">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>

  <van-button type="primary" block @click="router.push('/geoSearch')">定位搜索</van-button>

</template>


<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getMatch, getRecommend} from "../api/userApi.ts";
import UserRecommendCard from "../components/UserRecommendCard.vue";
import UserMatchCard from "../components/UserMatchCard.vue";
import {useRouter} from "vue-router";

const images = [
  'http://120.26.146.100:8889/public/monkey.png',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

const userListRecommend = ref([]);
const userListMatch = ref([]);
const isMatch = ref(false);
const router = useRouter();

onMounted(()=>{
  getRecommend("1","20").then(res =>{
    if (res.code === 200){
      userListRecommend.value = res.data;
      userListRecommend.value.forEach(user =>{
        if (user.tags){
          user.tags = JSON.parse(user.tags);
        }
      });
    }
  }).catch(error =>{
    console.log(error);
  });

  const num = 20;
  getMatch(num).then(res => {
    if (res.code === 200){
      userListMatch.value = res.data;
      userListMatch.value.forEach(user =>{
        if (user.tags){
          user.tags = JSON.parse(user.tags);
        }
      });
    }
  }).catch(error =>{
    console.log(error);
  });
});


</script>

<style scoped>


</style>